Day31 -- Whack A Mole

第 12 屆 iThome 鐵人賽

Modern Web

森林系工程師之開始工作才學JS?!系列第 32 篇

12th鐵人賽

lukechu

團隊對不起，你是個好人，但我們只是網友

2020-10-14 23:51:25

672 瀏覽

分享至

目標

今天要來做的是打地鼠

Step1

const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;

function randomTime(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

function randomHole(holes) {
    const idx = Math.floor(Math.random() * holes.length);
    const hole = holes[idx];
    if (hole === lastHole) {
        console.log('Ah nah thats the same one bud');
        return randomHole(holes);
    }
    lastHole = hole;
    return hole;
}

首先，我們要來隨機地鼠出現的時間，還有隨機地鼠出現的洞

時間的算法就跟之前影片速度一樣，是計算最大/最小的時間差，乘上隨機的數字，再加上最小值

出現位置的隨機方法則是隨機數乘上位置的總數再取整數，不過隨機有可能兩次都隨機到同樣的位置，所以這邊設一個變數來記錄上次出現的位置，如果新位置跟就位置相同，就重新執行函式

`Math.random()`

Math.random()函式會隨機回傳一個介於0~1的浮點數

Step2

let timeUp = false;

function peep() {
    const time = randomTime(200, 1000);
    const hole = randomHole(holes);
    hole.classList.add('up');
    setTimeout(() => {
        hole.classList.remove('up');
        if (!timeUp) peep();
    }, time);
}

接下來要處理地鼠出現/消失，這邊使用上一步建立的函式，隨機地鼠出現的時間、位置，然後加上up class，最後使用setTimeout()讓地鼠在出現的時間到了之後消失

這邊還有加上一個變數timeUp，用途是紀錄遊戲時間是否結束

.mole {
  background: url('mole.svg') bottom center no-repeat;
  background-size: 60%;
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  transition:all 0.4s;
}

.hole.up .mole {
  top: 0;
}

CSS這邊有一個top屬性，這個屬性會影響元素的垂直位置

Step3

let score = 0;

function startGame() {
    scoreBoard.textContent = 0;
    timeUp = false;
    score = 0;
    peep();
    setTimeout(() => timeUp = true, 10000)
}

這邊是處理開始遊戲的狀態，開始遊戲的時候要把一切都歸零，然後才開始讓地鼠出現，經過一段時間之後，要將timeUp設為true，這樣遊戲就會停止了

再來加上一個開始遊戲的按鈕在<body>

<button onClick="startGame()">Start!</button>

Step4

function bonk(e) {
    if (!e.isTrusted) return; // cheater!
    score++;
    this.parentNode.classList.remove('up');
    scoreBoard.textContent = score;
}

moles.forEach(mole => mole.addEventListener('click', bonk));

最後，這邊要處理打到地鼠要做的事，算分跟移除class我就不贅述了，這裡有一個新東西是e.isTrusted，e.isTrusted是一個滑鼠事件屬性，是判定是否由滑鼠點擊而觸發，因為JavaScript可以從控制台輸入程式觸發，所以屬性可以幫助我們防止作弊

以上就是JS30的全部內容了！！